<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.main {
				width: 150px;
				border: 1px solid #e1e1e1;
				margin: 0 auto;
				padding: 20px;
				border-radius: 5px;
			}
			li {
				height: 50px;
				cursor: pointer;
				border-bottom: 1px solid #f1f1f1;
				line-height: 50px;
			}
		</style>
	</head>

	<body>
		<div class="main">
			<button id="show">显示列表</button>
			<button class="hide">隐藏列表</button>
			<ul id="list" style="display: none;">
				<li>第 1 个标签</li>
				<li>第 2 个标签</li>
				<li>第 3 个标签</li>
				<li>第 4 个标签</li>
				<li>第 5 个标签</li>
			</ul>
		</div>
	</body>
</html>

<script src="common.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var listEl = query('#list');

	// 绑定显示事件
	bindEvent('click','#show', function (event) {
		listEl.style.display = 'block';
	});

	// 绑定隐藏事件
	bindEvent('click','.hide', function (event) {
		listEl.style.display = 'none';
	});

	// 给所有li绑定事件,使用事件托管
	bindEvents('click','#list', 'li', function (event) {
		alert(this.innerText);
	});
	
</script>